// 高分辨率屏幕适配样式
// 专门针对4K、5K等高分辨率显示器优化

// 4K屏幕 (2560x1440及以上) - 真正的等比缩放
@include desktop-4k {
  // 整个页面使用CSS transform scale进行等比缩放
  // 所有元素会自动按比例缩放，无需手动调整
}

// 5K屏幕 (3200x1800及以上) - 真正的等比缩放
@include desktop-5k {
  // 整个页面使用CSS transform scale进行等比缩放
  // 所有元素会自动按比例缩放，无需手动调整
}

// 超宽屏适配 (21:9 比例)
@media (min-width: 3440px) and (min-aspect-ratio: 21/9) {
  .home-page {
    .main-container {
      // 超宽屏下的特殊布局
      .top-section {
        .left-sidebar {
          width: 280px;
        }
        
        .center-banner {
          flex: 2; // 给中间区域更多空间
          min-width: 800px;
        }
        
        .right-sidebar {
          width: 350px;
        }
      }
      
      // 添加额外的侧边内容区域
      .extra-content {
        display: flex;
        gap: 30px;
        margin-top: 30px;
        
        .additional-panel {
          flex: 1;
          background: #fff;
          border-radius: 12px;
          padding: 25px;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

// 高分辨率屏幕下的组件优化
@media (min-width: 2560px) {
  // 导航栏优化
  .app-header {
    .header-content {
      .main-nav {
        .nav-item {
          padding: 15px 20px;
          font-size: 16px;
        }
      }
      
      .user-actions {
        .action-link {
          padding: 12px 16px;
          font-size: 15px;
        }
      }
    }
  }
  
  // 轮播图优化
  .home-banner {
    .banner-slide {
      height: 400px; // 4K屏幕下增加轮播图高度
      
      .slide-content {
        .slide-title {
          font-size: 36px;
          margin-bottom: 20px;
        }
        
        .slide-subtitle {
          font-size: 18px;
          margin-bottom: 30px;
        }
        
        .slide-button {
          padding: 15px 30px;
          font-size: 16px;
        }
      }
    }
  }
  
  // 产品卡片优化
  .product-card {
    padding: 20px;
    border-radius: 12px;
    
    .product-image {
      height: 200px;
      border-radius: 8px;
    }
    
    .product-info {
      .product-title {
        font-size: 16px;
        margin-bottom: 8px;
      }
      
      .product-price {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  
  // 公告面板优化
  .notice-panel {
    .panel-header {
      font-size: 18px;
      padding: 15px 20px;
    }
    
    .notice-list {
      .notice-item {
        padding: 15px 20px;
        
        .notice-title {
          font-size: 15px;
          line-height: 1.6;
        }
        
        .notice-date {
          font-size: 13px;
        }
      }
    }
  }
}

// 高DPI显示优化
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  // 确保在高DPI屏幕上图标和文字清晰
  .icon,
  .fa,
  .fas,
  .far,
  .fab {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  // 优化边框显示
  .card,
  .btn,
  .input {
    border-width: 0.5px;
  }
}

// 打印样式优化（高分辨率）
@media print {
  .home-page {
    .main-container {
      max-width: none;
      padding: 0;
      
      .top-section {
        flex-direction: column;
        
        .left-sidebar,
        .right-sidebar {
          width: 100%;
          margin-bottom: 20px;
        }
      }
    }
  }
}
